<template>
  <div class="product-detail-container">
    <div class="detail-images">
      <div 
        v-for="(image, index) in images" 
        :key="index"
        class="detail-image-item"
      >
        <img 
          :src="fileBaseUrl()+image" 
          :alt="'商品详情图' + (index + 1)"
          @load="onImageLoad"
          @error="onImageError"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { fileBaseUrl } from '@/apis/files'

const props = defineProps({
  images: {
    type: Array,
    required: true,
    default: () => []
  }
})


const onImageLoad = (event) => {
  // 图片加载完成后的处理
  event.target.style.opacity = 1
}

const onImageError = (event) => {
  // 图片加载失败的处理
  event.target.src = '默认图片地址' // 可以设置一个默认的占位图
}
</script>

<style scoped>
.product-detail-container {
  width: 750px;
  margin: 0 auto;
  margin-top: 25px;
  background: #fff;
}

.detail-images {
  width: 100%;
}

.detail-image-item {
  width: 100%;
  margin-bottom: 0px;
  background: #f5f5f5;
  overflow: hidden;
}

.detail-image-item img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 适配移动端 */
@media screen and (max-width: 750px) {
  .product-detail-container {
    width: 100%;
  }
}
</style>
